<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>

    <style type="text/css">
        html,
        body {
            height: 100%;
            /* position: absolute;
            z-index: 100000; */
        }

        .wrap {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            position: relative;
        }

        header {
            height: 44px;
            width: 100%;
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            line-height: 44px;
            font-size: 20px;
        }

        .flex-1 {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex:1;
        }

        footer {
            height: 30px;
            width: 100%;
            background-color: #81a9c3;
            color: white;
            line-height: 30px;
            text-align: center;
        }

        .function{
            font-size: 16px;
            padding: 5px 10px;
            border: 1px solid blue;
            border-radius: 3px;
            margin: 5px;
            text-align: center;
            z-index : 9999;
        }

        .live-info{
            display: inline-block;
        }
         
        .live-info .label{
            display: inline-block;
        }

        .live-info input{
            width: 60px;
        }

        .bottom {
            background-color: #fff;
            position: absolute;
            bottom: 0;
            z-index: 0;
            /* display: none; */
        }

        .padding-5{
            padding: 0px 5px;
        }
        .camera {
            text-align: center;
            width: 30vw;
        }

        .camera img {
            width: 35px;
        }
    </style>
</head>

<body class="wrap">
    <div  class="bottom">
        
        <div class="flex-1">
            
            <div class="camera" style="position: fixed; right: 0px;bottom: 30%;" onclick="openMeiYan()">
                <img src="../image/chat/meiyan.png" alt="">
                <div style="font-size: 14px; color: #fff;">美颜</div></div>
            
            
        </div>
        <div>

        </div>
    </div>    
    <!-- <iframe src="html/beauty.html" style="z-index:9999" width="100%" height="100%"> 
        
    </iframe> -->
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/lib/lib-generate-test-usersig.min.js"></script>
<script type="text/javascript" src="../script/lib/md5.js"></script>
<script type="text/javascript" src="../script/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../script/mhsdk1.js"></script>
<script type="text/javascript" >

    apiready = function name(params) {
        //sdk初始化
        mhsdkApi.mhInit();
        var cameraPermission = 'camera'
        var microphonePermission = 'microphone'
        var permissions = [cameraPermission,microphonePermission]
        var resultList = api.hasPermission({
            list: permissions
        });
         if(resultList[0].granted && resultList[1].granted){
            mhsdkApi.startPreview()
        } else{
            api.requestPermission({
                list: permissions,
            }, function(res) {
                if (res.list[0].granted && res.list[1].granted) {
                    mhsdkApi.startPreview()
                }
            });
        }
        // setTimeout(function () {
        //     openMeiYan()
        //     }, 3000)
        
    }
   

    function openMeiYan() {
        mhsdkApi.openMeiYan();
    }
    
    
</script>



</html>
